<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      订房管理
    </div>
    <div style="margin-left: 400PX">
      <el-button type="primary" @click="insertReserveButton"
                 style="margin-left: 40px"
      >新增
      </el-button>
      <el-select v-model="abrogateIdentity" placeholder="预定状态"
                 style="width: 200px;margin-left: 40px" clearable
      >
        <el-option
          v-for="item in abrogateIdentityList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="roomNumber" placeholder="房间号"
                style="width: 200px;margin-left: 40px" clearable
      />
      <el-input v-model="reserveId" placeholder="预定ID"
                style="width: 200px;margin-left: 40px" clearable
      />
      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px"
      >查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="selectList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="reserveId" sortable label="预定ID"/>
        <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
        <el-table-column align="center" fixed prop="customerName" sortable label="顾客名称"/>
        <el-table-column align="center" fixed prop="identificationCard" sortable label="身份证号"/>
        <el-table-column align="center" fixed prop="state" sortable label="预定状态"/>
        <el-table-column align="center" fixed prop="liveId" sortable label="订单ID"/>
        <el-table-column align="center" fixed prop="reserveTime" sortable label="预定时间"/>
        <el-table-column align="center" fixed prop="reserveLiveTime" sortable label="入住时间"/>
        <el-table-column align="center" fixed prop="reserveDayNumber" sortable label="入住天数"/>
        <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
        <el-table-column align="center" fixed prop="abrogateIdentity" sortable label="作废标识"/>
        <el-table-column align="center" fixed="right" label="操作">
          <template v-slot="scope">
            <!--传入的scope.row参数为当前行的数据-->
            <el-button v-if="scope.row.state === '预定中' && scope.row.abrogateIdentity === '未作废'" @click="insertStayButton(scope.row)" type="text"
                       size="small"
            >入住
            </el-button>
            <el-button v-if="scope.row.state === '预定中' && scope.row.abrogateIdentity === '未作废' " @click="cancelStayButton(scope.row)" type="text"
                       size="small"
            >取消
            </el-button>
            <el-button v-if="scope.row.state === '预定中' && scope.row.abrogateIdentity === '未作废' " @click="abrogateStayButton(scope.row)" type="text"
                       size="small"
            >作废
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!--新增弹窗-->
      <el-dialog title="新增订房信息" width="40%" :visible.sync="insertReserveButtonController"
                 @close="closeDialog('ruleForm')"
      >
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="Roles" :model="reserve" ref="ruleForm">
            <el-form-item label="房间" prop="roomId">
              <el-select show-word-limit style="width: 80%" v-model="reserve.roomId" placeholder="请选择房间号"
                         clearable
              >
                <el-option
                  v-for="item in roomList"
                  :key="item.roomId"
                  :label="item.roomNumber + '-' + item.roomTypeName"
                  :value="item.roomId"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="顾客" prop="customerId">
              <el-select show-word-limit style="width: 80%" v-model="reserve.customerId" placeholder="请选择顾客"
                         clearable
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.customerId"
                  :label="item.customerName + '-' + item.identificationCard"
                  :value="item.customerId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="入住时间" prop="reserveLiveTime">
              <el-date-picker
                v-model="reserve.reserveLiveTime"
                type="date"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="请选择入住时间" style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="入住天数" prop="reserveDayNumber">
              <el-input v-model="reserve.reserveDayNumber" maxlength="2" show-word-limit style="width: 80%"
                        clearable placeholder="请输入入住天数"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="reserve.remark" maxlength="20" show-word-limit style="width: 80% "
                        clearable placeholder="请输入备注"
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insertReserve('ruleForm')">确定</el-button>
        <el-button @click="closeDialog('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <el-dialog title="办理入住" width="40%" :visible.sync="insertStayButtonController">
        <div style="margin: 10px">
          <H1>请确认是否入住</H1>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="insertStay">确定</el-button>
        <el-button @click="insertStayButtonController = false">取消</el-button>
      </span>
      </el-dialog>

      <el-dialog title="退房" width="40%" :visible.sync="cancelStayButtonController">
        <div style="margin: 10px">
          <H1>请确认是否退房</H1>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelStay">确定</el-button>
        <el-button @click="cancelStayButtonController = false">取消</el-button>
      </span>
      </el-dialog>

      <el-dialog title="作废" width="40%" :visible.sync="abrogateStayButtonController">
        <div style="margin: 10px">
          <H1>请确认是否作废</H1>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="abrogateStay">确定</el-button>
        <el-button @click="abrogateStayButtonController = false">取消</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'
import { queryAll} from '@/api/customer'
import { selectStay } from '@/api/stay'
import { abrogateReserve, cancelReserve, insertReserve, reserveUpdateLive, selectReserve } from '@/api/reserve'

export default {
  name: 'reserve',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      abrogateIdentityList: [
        { label: '已作废', value: '已作废' },
        { label: '未作废', value: '未作废' }
      ],
      abrogateIdentity: '',
      roomNumber: '',
      reserveId: '',
      selectList: [],
      roomList: [],
      insertReserveButtonController: false,
      reserve: {},
      insertStayId: '',
      insertStayTableId: '',
      customerList: [],
      reserveIds: '',
      reserveTableId: '',
      insertStayButtonController: false,
      cancelStayButtonController: false,
      abrogateStayButtonController: false,
      insertList: {
        customerId: '',
        roomId: '',
        roomNumber: '',
        remark: ''
      },
      Roles: {
        customerId: [
          { required: true, trigger: 'blur', message: '顾客不能为空' }
        ],
        roomId: [
          { required: true, trigger: 'blur', message: '房间不能为空' }
        ],
        reserveLiveTime:[
          { required: true, trigger: 'blur', message: '入住时间不能为空' }
        ],
        reserveDayNumber:[
          { required: true, trigger: 'blur', message: '入住天数不能为空' }
        ]
      }
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    async selectCustomer() {
      await queryAll({}).then(
        response => {
          this.customerList = response.data
        }
      )
      await selectStay({
        state: '空闲'
      }).then(
        response => {
          this.roomList = response.data
        }
      )
    },
    selectAll() {
      selectReserve({
        abrogateIdentity: this.abrogateIdentity,
        reserveId: this.reserveId,
        roomNumber: this.roomNumber
      }).then(
        response => {
          this.selectList = response.data
        }
      )
    },
    check() {
      this.state = ''
      this.roomNumber = ''
      this.abrogateIdentity = ''
      this.selectAll()
    },
    async insertReserveButton() {
      await this.selectCustomer()
      this.insertReserveButtonController = true
      this.reserve = {
        customerId: '',
        roomId: '',
        reserveLiveTime: '',
        reserveDayNumber: '',
        remark: ''
      }
    },
    insertReserve(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertReserve({
            roomId: this.reserve.roomId,
            customerId: this.reserve.customerId,
            remark: this.reserve.remark,
            reserveLiveTime: this.reserve.reserveLiveTime,
            reserveDayNumber: this.reserve.reserveDayNumber
          }).then(
            async response => {
              this.selectAll()
              this.insertReserveButtonController = false
            }
          )
        } else {
          return false
        }
      })
    },
    insertStayButton(row) {
      this.insertStayId = row.reserveId
      this.insertStayTableId = row.reserveTableId
      this.insertStayButtonController = true
    },
    insertStay() {
      reserveUpdateLive({
        reserveId: this.insertStayId,
        reserveTableId: this.insertStayTableId
      }).then(
        async response => {
          this.selectAll()
          this.insertStayButtonController = false
        }
      )
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
      this.insertReserveButtonController = false
    },
    cancelStayButton(row) {
      this.reserveIds = row.reserveId
      this.reserveTableId = row.reserveTableId
      this.cancelStayButtonController = true
    },
    abrogateStayButton(row) {
      this.reserveIds = row.reserveId
      this.reserveTableId = row.reserveTableId
      this.abrogateStayButtonController = true
    },
    cancelStay() {
      cancelReserve({
        reserveId: this.reserveIds,
        reserveTableId: this.reserveTableId
      }).then(
        async response => {
          this.selectAll()
          this.cancelStayButtonController = false
        }
      )
    },
    abrogateStay() {
      abrogateReserve({
        reserveId: this.reserveIds,
        reserveTableId: this.reserveTableId
      }).then(
        async response => {
          this.selectAll()
          this.abrogateStayButtonController = false
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
